import {
  cancelMeeting,
  createAppointMeeting,
  createVideoMeeting,
  deleteVideoMeeting,
  getMeetingList,
  meetingDetail,
  myMeeting,
  updateMeetingStatus,
} from '@/services/MeetingService';
import { userList } from '@/services/UserService';
import {
  CheckCircleFilled,
  CopyFilled,
  DeleteOutlined,
} from '@ant-design/icons';
import { Key } from '@ant-design/pro-components';
import {
  ModalForm,
  ProForm,
  ProFormDatePicker,
  ProFormInstance,
  ProFormItem,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-form';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-table';
import { useModel } from '@umijs/max';
import {
  Button,
  Checkbox,
  Col,
  Form,
  Input,
  List,
  Modal,
  Popconfirm,
  Row,
  Tabs,
  TabsProps,
  message,
} from 'antd';
import copy from 'copy-to-clipboard';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import SVG from 'react-inlinesvg';
import styles from './index.less';

const { Search } = Input;

type CreateMeet = {
  meetingName: string;
  meetPassword: string;
};

type JoinMeet = {
  meetingCode: string;
  meetingName: string;
  meetPassword: string;
};

type EntranceMeet = {
  meetingCode: string;
  meetingName: string;
  meetPassword: string;
};

export default () => {
  const [_modal, contextHolder1] = Modal.useModal();
  const [_message, contextHolder2] = message.useMessage();
  const [createMeetForm] = Form.useForm<CreateMeet>();
  const [joinMeetForm] = Form.useForm<JoinMeet>();
  const [entranceMeetForm] = Form.useForm<EntranceMeet>();
  const { peerId, peerServer } = useModel('global');
  const { initialState } = useModel('@@initialState');
  const formRef = useRef<ProFormInstance>();
  const myMeetRef = useRef<ActionType>();
  const meetListRef = useRef<ActionType>();
  const [userInfo, setUserInfo] = useState(
    JSON.parse(localStorage.getItem('userInfo')!),
  );
  //是否在会议中
  const [isMeeting, setIsMeeting] = useState<boolean>(false);

  useEffect(() => {
    getMyselfMeetingInfo();
    window.osn.on('changMyselfMeetingStatus', (_: any, result: any) => {
      console.log('changMyselfMeetingStatus:返回--', result);
      setIsMeeting(result);
    });
  }, []);

  const sendMessage = async (message: {}) => {
    window.tm!.ipcRenderer.send(
      'send-websocket-message',
      JSON.stringify(message),
    );
  };
  //获取自己是否在会议中
  const getMyselfMeetingInfo = () => {
    const message = {
      messageType: 'getMyselfMeetingInfo',
    };
    sendMessage(message);
  };

  //推流
  const pushStream = async ({ meetingName, meetPassword }: CreateMeet) => {
    // const { data } = await meetingDetail(peerServer, meetingCode);
    // if (data != null) {
    //     //会议室已存在
    //     _modal.confirm({
    //         icon: <CheckCircleFilled style={{ color: '#52c41a' }} />,
    //         centered: true,
    //         content: `会议已创建，是否加入？`,
    //         okText: '加入会议',
    //         cancelText: '取消',
    //         onOk() {
    //             pullStream({ meetingCode, meetingName });
    //         },
    //     });
    // } else {
    await createVideoMeeting(peerServer, meetingName, meetPassword)
      .then((res) => {
        console.log('res===', res);
        _modal.confirm({
          icon: <CheckCircleFilled style={{ color: '#52c41a' }} />,
          centered: true,
          content: (
            <div>
              会议号：{res.data} &emsp;
              <Button
                icon={<CopyFilled />}
                onClick={() => {
                  copy(res.data);
                  _message.success('复制成功');
                }}
              >
                复制
              </Button>
            </div>
          ),
          cancelText: '取消',
          okText: '进入会议',
          onOk: () => {
            setIsMeeting(true);
            window.tm!.ipcRenderer.send(
              'openMeet',
              'pushStream',
              res.data,
              meetingName,
            );
          },
          onCancel: () => {
            deleteVideoMeeting(peerServer, res.data);
          },
        });
      })
      .catch((e) => {
        console.log('创建失败', e);
        _message.error('创建会议失败！');
      });

    // }
    return true;
  };

  //拉流
  const pullStream = async ({
    meetingCode,
    meetingName,
    meetPassword,
  }: JoinMeet) => {
    const { data } = await meetingDetail(peerServer, meetingCode);
    if (data == null) {
      message.error('此会议不存在，请确认会议号后再进入！');
      return false;
    }
    if (data != null && data.status === 1) {
      message.error('会议已结束，请确认后参会');
      return true;
    }
    if (
      data != null &&
      data.meetPassword != null &&
      userInfo.id != data.createUser
    ) {
      if (data.meetPassword != meetPassword) {
        message.error('您输入的密码错误，请重新输入！');
        return false;
      }
    }
    let streamType = 'pullStream';
    if (data.createUser == userInfo.id) {
      streamType = 'pushStream';
    }
    setIsMeeting(true);

    //更新会议状态
    updateMeetingStatus(peerServer, data.meetingCode);

    window.tm!.ipcRenderer.send(
      'openMeet',
      streamType,
      data.meetingCode,
      data.meetingName,
    );
    return true;
  };

  const [isShowMeetPassword, setIsShowMeetPassword] = useState<boolean>(true);

  const [meetingUserModel, setMeetingUserModel] = useState<boolean>(false);

  type DataType = {
    id: string;
    userName: string;
    account: string;
  };
  const columnData: ProColumns<DataType>[] = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
      render: (_, record) => {
        return record.account + '/' + record.userName;
      },
    },
  ];
  const [userListData, setUserListData] = useState<DataType[]>([]);
  const getUserList = async () => {
    const result = await userList(peerServer);
    if (result.status == 200) {
      setUserListData(result.data.data);

      result.data.data.filter((item: DataType) => {
        if (item.id == userInfo.id) {
          const keys = [...selectedRowKeysList];
          keys.push(userInfo.id);
          setSelectedRowKeysList(keys);
          const data = [];
          // @ts-ignore
          item['compereName'] = item.account + '/' + item.userName;
          data.push(item);
          setSelectedRow(data);
        }
      });
    }
  };

  type meetingUserType = {
    meetingUserId: string;
    meetingUserName: string;
  };
  const [selectedRowKeysList, setSelectedRowKeysList] = useState<Key[]>([]);
  const [selectedRow, setSelectedRow] = useState<DataType[]>([]);
  const [compereData, setCompereData] = useState<meetingUserType>({
    meetingUserId: '',
    meetingUserName: '',
  });
  const rowClassName = (record: any) => {
    return selectedRowKeysList.includes(record.id) ? '' : styles.customCheckbox;
  };

  useEffect(() => {
    getUserList();
  }, []);

  type meetingListType = {
    id: number;
    compereId: string;
    compereName: string;
    isRecord: string;
    meetPassword: string;
    meetTime: string;
    meetingCode: string;
    meetingName: string;
    appointStartTime: string;
    appointEndTime: string;
    status: number;
    createUser: number;
  };
  const [meetingInfo, setMeetingInfo] = useState<meetingListType>({
    id: 0,
    compereId: '',
    compereName: '',
    isRecord: '',
    meetPassword: '',
    meetTime: '',
    meetingCode: '',
    meetingName: '',
    appointStartTime: '',
    appointEndTime: '',
    status: 0,
    createUser: 0,
  });
  const [isShowCreateMeetPassword, setIsShowCreateMeetPassword] =
    useState<boolean>(true);
  const [isShowEntranceMeet, setIsShowEntranceMeet] = useState<boolean>(false);
  const meetingColumn: ProColumns<meetingListType>[] = [
    {
      title: '会议名',
      dataIndex: 'meetingName',
      key: 'meetingName',
      width: 110,
      ellipsis: true,
    },
    {
      title: '会议号',
      dataIndex: 'meetingCode',
      key: 'meetingCode',
      width: 80,
      ellipsis: true,
    },
    {
      title: '发起人',
      dataIndex: 'userName',
      key: 'userName',
      width: 80,
      ellipsis: true,
    },
    {
      title: '会议状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      ellipsis: true,
      valueEnum: {
        0: { text: '会议中', status: 'Success' },
        1: { text: '已结束', status: 'Default' },
        2: { text: '未开始', status: 'Processing' },
        3: { text: '已取消', status: 'Error' },
      },
    },
    {
      title: '会议时间',
      key: 'appointStartTime',
      dataIndex: 'appointStartTime',
      ellipsis: true,
      render: (text, record) => {
        return (
          (record.appointStartTime
            ? dayjs(record.appointStartTime).format('YYYY-MM-DD hh:mm')
            : '') +
          ' - ' +
          (record.appointEndTime
            ? dayjs(record.appointEndTime).format('YYYY-MM-DD hh:mm')
            : '')
        );
      },
    },
    {
      title: '操作',
      width: 200,
      key: 'option',
      valueType: 'option',
      render: (_, record: meetingListType) => [
        (record.status === 0 || record.status === 2) && (
          <Button
            key="link"
            onClick={() => {
              if (isMeeting) {
                _message.error('已在会议中，不能重复参加!');
                return true;
              }
              console.log('进入会议');
              if (
                record.createUser != userInfo.id &&
                record.meetPassword != null &&
                record.meetPassword != ''
              ) {
                //创建人不是我，并且有密码，则需要输入密码
                setMeetingInfo(record);
                setIsShowEntranceMeet(true);
                // pullStream({meetingCode: record.meetingCode, meetingName: record.meetingName, meetPassword: record.meetPassword});
              } else if (
                record.createUser == userInfo.id ||
                record.meetPassword == null
              ) {
                setIsMeeting(true);
                //更新会议状态
                updateMeetingStatus(peerServer, record.meetingCode);
                //创建人是我，或者不要密码
                window.tm!.ipcRenderer.send(
                  'openMeet',
                  'pushStream',
                  record.meetingCode,
                  record.meetingName,
                );
              }
            }}
          >
            进入会议
          </Button>
        ),
        ((record.status === 2 && !record.createUser) ||
          (record.status === 2 && record.createUser == userInfo.id)) && (
          <Popconfirm
            key="delete"
            title="确认取消吗？"
            onConfirm={async () => {
              console.log('取消会议');
              const { message, status } = await cancelMeeting(
                peerServer,
                record.id,
              );
              if (status == 200) {
                _message.success('取消会议成功！');
              } else {
                _message.error(message);
              }
              myMeetRef.current?.reload();
              meetListRef.current?.reload();
            }}
          >
            <Button key="warn">取消会议</Button>
          </Popconfirm>
        ),
      ],
    },
  ];
  const cancelMeetingColumn: ProColumns<meetingListType>[] = [
    {
      title: '会议名',
      dataIndex: 'meetingName',
      key: 'meetingName',
      width: 110,
      ellipsis: true,
    },
    {
      title: '会议号',
      dataIndex: 'meetingCode',
      key: 'meetingCode',
      width: 100,
      ellipsis: true,
    },
    {
      title: '发起人',
      dataIndex: 'userName',
      key: 'userName',
      width: 100,
      ellipsis: true,
    },
    {
      title: '会议状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      ellipsis: true,
      valueEnum: {
        0: { text: '会议中', status: 'Success' },
        1: { text: '已结束', status: 'Default' },
        2: { text: '未开始', status: 'Processing' },
        3: { text: '已取消', status: 'Error' },
      },
    },
    {
      title: '会议时间',
      key: 'appointStartTime',
      dataIndex: 'appointStartTime',
      ellipsis: true,
      render: (text, record: any) => {
        return (
          (record.appointStartTime
            ? dayjs(record.appointStartTime).format('YYYY-MM-DD hh:mm')
            : '') +
          ' - ' +
          (record.appointEndTime
            ? dayjs(record.appointEndTime).format('YYYY-MM-DD hh:mm')
            : '')
        );
      },
    },
  ];

  const myMeetingTabsItems: TabsProps['items'] = [
    {
      key: '0',
      label: '会议中',
      children: (
        <ProTable
          actionRef={myMeetRef}
          headerTitle={false}
          rowClassName={styles.customRow}
          params={{
            status: 0,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await myMeeting(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
                success: result?.success,
              };
            }
          }}
          columns={meetingColumn}
          type={'table'}
          options={false}
          rowKey={'id'}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '1',
      label: '已预约',
      children: (
        <ProTable
          actionRef={myMeetRef}
          headerTitle={false}
          params={{
            status: 2,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await myMeeting(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
                success: result?.success,
              };
            }
          }}
          columns={meetingColumn}
          rowKey={'id'}
          type={'table'}
          // showHeader={false}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '2',
      label: '已结束',
      children: (
        <ProTable
          actionRef={myMeetRef}
          headerTitle={false}
          params={{
            status: 1,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await myMeeting(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
                success: result?.success,
              };
            }
          }}
          columns={cancelMeetingColumn}
          rowKey={'id'}
          type={'table'}
          // showHeader={false}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '3',
      label: '已取消',
      children: (
        <ProTable
          actionRef={myMeetRef}
          headerTitle={false}
          params={{
            status: 3,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await myMeeting(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
                success: result?.success,
              };
            }
          }}
          columns={cancelMeetingColumn}
          type={'table'}
          rowKey={'id'}
          // showHeader={false}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
  ];
  const meetingListTabsItems: TabsProps['items'] = [
    {
      key: '0',
      label: '会议中',
      children: (
        <ProTable
          actionRef={meetListRef}
          headerTitle={false}
          params={{
            status: 0,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            params.status = 0;
            const result = await getMeetingList(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
              };
            }
          }}
          columns={meetingColumn}
          type={'table'}
          rowKey={'id'}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '1',
      label: '已预约',
      children: (
        <ProTable
          actionRef={meetListRef}
          headerTitle={false}
          params={{
            status: 2,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await getMeetingList(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
              };
            }
          }}
          columns={meetingColumn}
          type={'table'}
          rowKey={'id'}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '2',
      label: '已结束',
      children: (
        <ProTable
          actionRef={meetListRef}
          headerTitle={false}
          params={{
            status: 1,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await getMeetingList(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
              };
            }
          }}
          columns={cancelMeetingColumn}
          type={'table'}
          rowKey={'id'}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
    {
      key: '3',
      label: '已取消',
      children: (
        <ProTable
          actionRef={meetListRef}
          headerTitle={false}
          params={{
            status: 3,
          }}
          pagination={{
            pageSize: 4,
            showSizeChanger: false,
          }}
          request={async (params, sort, filter) => {
            const result = await getMeetingList(peerServer, {
              ...params,
              sort,
              filter,
            });
            if (result.status == 200) {
              console.log('setMyMeetingList', result.data);
              return {
                data: result?.data.records || [],
                total: result?.data.total || 0,
              };
            }
          }}
          columns={cancelMeetingColumn}
          type={'table'}
          rowKey={'id'}
          options={false}
          search={false}
          rootClassName={styles.meetingTable}
        />
      ),
    },
  ];
  return (
    <div className={styles.meeting}>
      {contextHolder1}
      {contextHolder2}
      <div className={styles.left}>
        <div style={{ width: '100%', height: '49%', minHeight: '400px' }}>
          <div style={{ paddingTop: '10px' }}>我的会议</div>
          <Tabs
            defaultActiveKey="0"
            destroyInactiveTabPane={true}
            items={myMeetingTabsItems}
          />
        </div>
        <div
          style={{
            width: '100%',
            height: '49%',
            minHeight: '400px',
            marginTop: '5px',
          }}
        >
          <div style={{ paddingTop: '10px' }}>会议列表</div>
          <Tabs
            defaultActiveKey="0"
            destroyInactiveTabPane={true}
            items={meetingListTabsItems}
          />
        </div>

        <ModalForm<{
          meetingCode: string;
          meetingName: string;
          meetPassword: string;
        }>
          width={400}
          title="进入视频会议"
          open={isShowEntranceMeet}
          onOpenChange={setIsShowEntranceMeet}
          initialValues={{
            meetingCode: meetingInfo.meetingCode,
            meetPassword: '',
          }}
          form={entranceMeetForm}
          modalProps={{
            centered: true,
          }}
          autoFocusFirstInput
          onFinish={pullStream}
        >
          <ProFormText
            name="meetingCode"
            label="会议ID"
            rules={[{ required: true }]}
          />
          <ProFormText.Password name="meetPassword" label="会议密码" />
        </ModalForm>
      </div>
      <div className={styles.right}>
        <div className={styles.iconButtons}>
          <Row justify={'center'} align={'middle'}>
            <Col span={12}>
              <ModalForm<CreateMeet>
                initialValues={{
                  meetingName: `${initialState?.nickname}发起的视频会议`,
                  meetPassword: '',
                }}
                width={400}
                title="创建视频会议"
                trigger={
                  <div className={styles.iconBtn}>
                    <SVG
                      className={styles.iconSvg}
                      src="/img/meeting/chuangjianhuiyi.svg"
                    />
                    <div className={styles.title}>创建会议</div>
                  </div>
                }
                form={createMeetForm}
                modalProps={{
                  centered: true,
                  styles: {
                    body: {
                      height: '330px',
                    },
                  },
                }}
                autoFocusFirstInput
                onFinish={pushStream}
              >
                <ProFormText
                  name="meetingName"
                  label="会议名称"
                  rules={[{ required: true }]}
                />
                {/* <ProFormText
                                    name="meetingCode"
                                    label="会议ID"
                                    rules={[{ required: true }]}
                                /> */}
                <ProForm.Item
                  style={{ width: '440px' }}
                  name="isShowCreateMeetPassword"
                  label="会议密码"
                >
                  <Checkbox
                    className={
                      isShowCreateMeetPassword ? styles.customCheckbox : ''
                    }
                    onChange={(e) => {
                      setIsShowCreateMeetPassword(!e.target.checked);
                    }}
                  >
                    设置会议密码
                  </Checkbox>
                </ProForm.Item>
                <ProFormText.Password
                  width="lg"
                  name="meetPassword"
                  label="会议密码"
                  hidden={isShowCreateMeetPassword}
                />
              </ModalForm>
            </Col>
            <Col span={12}>
              <ModalForm<{
                meetingCode: string;
                meetingName: string;
                meetPassword: string;
              }>
                width={400}
                title="加入视频会议"
                trigger={
                  <div className={styles.iconBtn}>
                    <SVG
                      className={styles.iconSvg}
                      src="/img/meeting/jiaruhuiyi.svg"
                    />
                    <div className={styles.title}>加入会议</div>
                  </div>
                }
                initialValues={{
                  meetingCode: '',
                  meetPassword: '',
                }}
                form={joinMeetForm}
                modalProps={{
                  centered: true,
                }}
                autoFocusFirstInput
                onFinish={pullStream}
              >
                <ProFormText
                  name="meetingCode"
                  label="会议ID"
                  rules={[{ required: true }]}
                />
                <ProFormText.Password name="meetPassword" label="会议密码" />
              </ModalForm>
            </Col>
            <Col span={12}>
              <ModalForm<{
                meetingName: string;
                appointStartTime: string;
                appointEndTime: string;
                meetingUserId: string;
                meetingUserName: string;
              }>
                formRef={formRef}
                layout={'horizontal'}
                onFinish={async (values) => {
                  console.log('values', values);
                  if (
                    values.meetingUserId == null ||
                    values.meetingUserId == '' ||
                    values.meetingUserId == undefined
                  ) {
                    message.error('请先选择与会人员！');
                    return false;
                  }
                  const result = await createAppointMeeting(peerServer, values);
                  if (result.status == 200) {
                    myMeetRef.current?.reload();
                    meetListRef.current?.reload();
                    _modal.confirm({
                      icon: <CheckCircleFilled style={{ color: '#52c41a' }} />,
                      centered: true,
                      content: (
                        <div>
                          会议号：{result.data} &emsp;
                          <Button
                            icon={<CopyFilled />}
                            onClick={() => {
                              copy(result.data);
                              _message.success('复制成功');
                            }}
                          >
                            复制
                          </Button>
                        </div>
                      ),
                      okText: '确认',
                    });
                    message.success('创建会议成功');
                  } else {
                    message.error(result.message);
                  }
                  setSelectedRowKeysList([]);
                  setSelectedRow([]);
                  setSelectedRowKeysList([]);
                  return true;
                }}
                width={500}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                title="预约会议"
                trigger={
                  <div className={styles.iconBtn}>
                    <SVG
                      className={styles.iconSvg}
                      src="/img/meeting/yuyuehuiyi.svg"
                    />
                    <div className={styles.title}>预约会议</div>
                  </div>
                }
                modalProps={{
                  centered: true,
                  destroyOnClose: true, // 关闭时销毁 Modal 里的子元素
                  maskClosable: false,
                  styles: {
                    body: {
                      height: '600px',
                    },
                  },
                }}
                autoFocusFirstInput={true}
              >
                <ProFormText
                  width="lg"
                  name="meetingName"
                  label="会议名称"
                  rules={[{ required: true }]}
                />
                <ProFormDatePicker
                  width="lg"
                  name="appointStartTime"
                  label="预约开始时间"
                  fieldProps={{
                    format: 'YYYY-MM-DD HH:mm',
                    disabledDate: (current: any) => {
                      return (
                        current &&
                        current < dayjs().subtract(1, 'day').endOf('day')
                      );
                    },
                    // disabledTime: () => ({
                    //   disabledHours: () => range(0, 24).splice(0, dayjs().hour()),
                    //   disabledMinutes: () => range(0, 60).splice(0, dayjs().minute()),
                    //   disabledSeconds: () => []
                    // }),
                    showTime: {
                      defaultValue: dayjs('00:00', 'HH:mm'),
                    },
                    showNow: false,
                    onChange: () => {
                      console.log("dayjs().endOf('hour')", dayjs().hour());
                    },
                    onOk: () => {
                      const appointStartTimeStr =
                        formRef.current?.getFieldValue('appointStartTime');
                      if (
                        dayjs(appointStartTimeStr).format('YYYY-MM-DD HH:mm') <
                        dayjs(new Date()).format('YYYY-MM-DD HH:mm')
                      ) {
                        formRef.current?.setFieldValue(
                          'appointStartTime',
                          null,
                        );
                        message.error('预约开始时间小于当前时间，请重新选择！');
                        return false;
                      }
                      return true;
                    },
                  }}
                  rules={[{ required: true }]}
                />
                <ProFormDatePicker
                  width="lg"
                  name="appointEndTime"
                  label="预约结束时间"
                  fieldProps={{
                    format: 'YYYY-MM-DD HH:mm',
                    disabledDate: (current: any) => {
                      return (
                        current &&
                        current < dayjs().subtract(1, 'day').endOf('day')
                      );
                    },
                    showTime: {
                      defaultValue: dayjs('00:00', 'HH:mm'),
                    },
                    showNow: false,
                    onChange: () => {
                      console.log("dayjs().endOf('hour')", dayjs().hour());
                    },
                    onOk: () => {
                      const appointStartTimeStr =
                        formRef.current?.getFieldValue('appointStartTime');
                      if (appointStartTimeStr == null) {
                        formRef.current?.setFieldValue('appointEndTime', null);
                        message.error(
                          '请先选择预约开始时间，再选择预约结束时间！',
                        );
                        return false;
                      }
                      const appointEndTimeStr =
                        formRef.current?.getFieldValue('appointEndTime');
                      if (
                        dayjs(appointEndTimeStr).format('YYYY-MM-DD HH:mm') <
                        dayjs(appointStartTimeStr).format('YYYY-MM-DD HH:mm')
                      ) {
                        formRef.current?.setFieldValue('appointEndTime', null);
                        message.error(
                          '选择的预约结束时间小于预约开始时间，请重新选择！',
                        );
                        return false;
                      }
                      return true;
                    },
                  }}
                  rules={[{ required: true }]}
                />
                <ProForm.Item
                  style={{ width: '440px' }}
                  name="isShowMeetPassword"
                  label="会议密码"
                >
                  <Checkbox
                    className={isShowMeetPassword ? styles.customCheckbox : ''}
                    onChange={(e) => {
                      setIsShowMeetPassword(!e.target.checked);
                    }}
                  >
                    设置会议密码
                  </Checkbox>
                </ProForm.Item>
                <ProFormText.Password
                  width="lg"
                  name="meetPassword"
                  label="会议密码"
                  hidden={isShowMeetPassword}
                />
                <ProFormText
                  width="lg"
                  name="meetingUserId"
                  label="与会人员id"
                  hidden={true}
                />
                <ProForm.Item
                  style={{ width: '440px' }}
                  // width="lg"
                  name="meetingUserName"
                  label={
                    <a>
                      <span
                        style={{
                          display: 'inline-block',
                          marginInlineEnd: '4px',
                          color: '#dc4446',
                          fontSize: '14px',
                          fontFamily: 'SimSun,sans-serif',
                        }}
                      >
                        *
                      </span>
                      <span style={{ color: 'white', cursor: 'default' }}>
                        与会人员
                      </span>
                    </a>
                  }
                >
                  <Search
                    placeholder={'请选择与会人员'}
                    onSearch={() => {
                      setMeetingUserModel(true);
                    }}
                  />
                </ProForm.Item>
                {selectedRow.length > 0 && (
                  <ProFormItem
                    colon={false}
                    style={{ width: '440px' }}
                    name="meetingUserName"
                    label={<a></a>}
                  >
                    <List
                      rootClassName={styles.meetingUserList}
                      dataSource={selectedRow}
                      bordered={true}
                      rowKey={'id'}
                      renderItem={(record: any) => (
                        <List.Item
                          actions={[
                            <DeleteOutlined
                              onClick={(e) => {
                                console.log('record', record);
                                if (record.id == userInfo.id) {
                                  _message.info('不能删除自己!');
                                  return true;
                                }
                                const keys = [...selectedRowKeysList];
                                const keysTmp = keys.filter(
                                  (item) => item !== record.id,
                                );
                                setSelectedRowKeysList(keysTmp);
                                const selectedRowTmp = selectedRow.filter(
                                  (item) => item.id !== record.id,
                                );
                                setSelectedRow(selectedRowTmp);
                              }}
                            />,
                          ]}
                        >
                          <List.Item.Meta
                            avatar={
                              <SVG
                                style={{ width: '17px', height: '17px' }}
                                src="/img/meeting/user.svg"
                              />
                            }
                            title={
                              <a
                                style={{
                                  cursor: 'default',
                                  color: 'white',
                                }}
                              >
                                {record.compereName}
                              </a>
                            }
                          />
                        </List.Item>
                      )}
                    />
                  </ProFormItem>
                )}

                <ProFormSwitch width="lg" name="isRecord" label="开启录制" />
              </ModalForm>

              <Modal
                open={meetingUserModel}
                title="选择与会人员"
                centered={true}
                destroyOnClose={true}
                onCancel={() => {
                  setMeetingUserModel(false);
                }}
                onOk={() => {
                  console.log('onOk', 444);
                  console.log('selectedRow', selectedRow);
                  compereData.meetingUserId = selectedRowKeysList.join(',');
                  setCompereData(compereData);
                  console.log('选择与会人员setMeetingUserData', compereData);
                  formRef.current?.setFieldsValue(compereData);
                  setMeetingUserModel(false);
                }}
              >
                <ProTable
                  type={'table'}
                  // showHeader={false}
                  options={false}
                  search={false}
                  tableStyle={{ paddingTop: '16px' }}
                  columns={columnData}
                  dataSource={userListData}
                  pagination={false}
                  rowKey={'id'}
                  tableClassName={
                    selectedRowKeysList.length > 0 ? '' : styles.customTable
                  }
                  rowClassName={rowClassName}
                  rowSelection={{
                    type: 'checkbox',
                    selectedRowKeys: selectedRowKeysList,
                    onChange: (selectedRowKeys: any, selectedRows: any) => {
                      console.log('selectedRowKeys', selectedRowKeys);
                      console.log('selectedRows', selectedRows);
                      let changeFlag = true;
                      const selectedRowTmp = selectedRows.filter(
                        (item: any) => {
                          if (
                            item.compereName == '' ||
                            item.compereName == null
                          ) {
                            item.compereName =
                              item.account + '/' + item.userName;
                          }
                          if (item.id == userInfo.id) {
                            changeFlag = false;
                          }
                          return item;
                        },
                      );
                      if (changeFlag) {
                        _message.info('不能取消自己参会!');
                        return true;
                      }
                      setSelectedRow(selectedRowTmp);
                      setSelectedRowKeysList(selectedRowKeys);
                    },
                  }}
                  onRow={(record: any) => {
                    return {
                      onClick: () => {
                        console.log('record', record);
                        if (record.id == userInfo.id) {
                          _message.info('不能取消自己参会!');
                          return true;
                        }
                        const keys = [...selectedRowKeysList];
                        if (keys.includes(record.id)) {
                          const keysTmp = keys.filter(
                            (item) => item !== record.id,
                          );
                          setSelectedRowKeysList(keysTmp);
                          const selectedRowTmp = selectedRow.filter(
                            (item) => item.id !== record.id,
                          );
                          setSelectedRow(selectedRowTmp);
                        } else {
                          keys.push(record.id);
                          setSelectedRowKeysList(keys);
                          record.compereName =
                            record.account + '/' + record.userName;
                          selectedRow.push(record);
                          setSelectedRow(selectedRow);
                        }
                      }, // 点击行
                    };
                  }}
                ></ProTable>
              </Modal>
            </Col>
            <Col span={12}>
              <div className={styles.iconBtn}>
                <SVG
                  className={styles.iconSvg}
                  src="/img/meeting/huiyiluxiang.svg"
                />
                <div className={styles.title}>会议录像</div>
              </div>

              <Modal
                title={'会议录像'}
                open={false}
                centered={true}
                maskClosable={false}
                footer={null}
                width={1400}
                onOk={() => {
                  console.log('1111');
                }}
              >
                <div
                  style={{ width: '100%', height: '900px', display: 'flex' }}
                >
                  <div style={{ width: '30%' }}>
                    <div>搜索会议名/主持人</div>
                    <div>时间选择</div>
                    <div>视频列表</div>
                  </div>
                  <div>视频播放</div>
                </div>
              </Modal>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  );
};
